import { t } from 'i18next'
import React, { forwardRef, useImperativeHandle } from 'react'
import { Modal, Select, Button, Input } from '@kedacom/react-next'
import { StyledWrap, StyledVmpSelectItem, StyledVmpPlanModal, StylePreview } from './style'
import { SelectItem, Vmp } from '../interface'
import useService from './service'
import { getCheckPreNameRule } from '@/utils'
import { useGlobalStore } from '@/store/global'

export interface VmpPlanProps {
	disabled?: boolean
	getVmpParam: () => Vmp | null
}
export interface PlanRef {
	getValue: () => SelectItem
}
const VmpPlan = forwardRef((props: VmpPlanProps, ref: React.Ref<PlanRef>) => {
	const SWITCH = useGlobalStore((state) => state.SWITCH)

	const { disabled, getVmpParam } = props
	const {
		planOptions,
		planValue,
		changePlan,
		deletePlan,
		isSavePlanOpen,
		setIsSavePlanOpen,
		savePlanClick,
		savePlan,
		name,
		setName,
		saveAsPlan,
		change,
		inputRef,
	} = useService({ getVmpParam })
	useImperativeHandle(ref, () => ({
		getValue() {
			return planOptions.find((item) => item.value === planValue) as SelectItem
		},
	}))
	return (
		<StyledWrap className="mcc-vmp-plan-wrap">
			<div className="mcc_vmp_plan_option">
				<span className="label" style={{ color: disabled ? '#b6b6b6' : '#4e4e4e' }}>
					{t('预案选择')}
				</span>
				<Select
					width={366}
					panelLineHeight={40}
					options={planOptions}
					value={planValue}
					onClick={(e, v) => changePlan(v)}
					disabled={disabled}
					labelField={'count'}
					optionRender={(option, selected) => {
						return (
							<StyledVmpSelectItem className={selected ? 'selected' : ''}>
								<span className="select-icon"></span>
								{change(option as SelectItem) === 'auto' ? (
									<div className="auto">
										<span>{t('自动')}</span>
									</div>
								) : (
									<StylePreview className={`preview ${change(option as SelectItem)}`}></StylePreview>
								)}

								<span className="name">{option.label}</span>
								{option.value !== '0' && (
									<span
										className="delete-icon"
										onClick={(e) => deletePlan(e, option as SelectItem)}
									></span>
								)}
							</StyledVmpSelectItem>
						)
					}}
				/>
				{planValue === '0' && (
					<Button className="savePlan" onClick={savePlanClick}>
						{t('保存')}
					</Button>
				)}
				{planValue !== '0' && (
					<>
						<Button className="updatePlan" onClick={savePlanClick}>
							{t('保存')}
						</Button>
						<Button className="saveAsPlan" onClick={saveAsPlan}>
							{t('另存为')}
						</Button>
					</>
				)}
			</div>
			<Modal
				open={isSavePlanOpen}
				title={t('保存预案')}
				width={400}
				height={300}
				okText={t('保存')}
				onOk={savePlan}
				onCancel={() => {
					setIsSavePlanOpen(false)
					setName('')
				}}
				cancelText={t('取消')}
			>
				<StyledVmpPlanModal>
					<div className="label">{t('预案名称')}</div>
					<Input
						width={250}
						placeholder={t('请输入预案名称')}
						focusMsg={t('预案名称最多可输入16个字符')}
						innerRef={inputRef}
						maxLength={16}
						rule={{
							required: {
								showIcon: false,
								msg: t('预案名称不能为空'),
							},
							regular: getCheckPreNameRule(SWITCH.characterLimit),
						}}
						value={name}
						onChange={(e, v) => setName(v)}
					/>
				</StyledVmpPlanModal>
			</Modal>
		</StyledWrap>
	)
})
export default VmpPlan
